<template>
  <div class="gywm">
    <div class="jrBanner">
      <div class="title">
        可视化模板-Echarts&emsp;<span
          class="showTime"
          style="width: 100px;height: 100px;font-size: 0.5rem;"
        ></span>
      </div>
      <div class="two">
        <div class="left">
          <div class="panel" id="echarts1"></div>
          <div class="panel" id="echarts3" style="margin: 0.625rem 0;"></div>
          <div class="panel" id="echarts4"></div>
        </div>
        <div class="right">
          <div class="pane2" id="echarts2"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script type="text/javascript">
import "@/assets/js/rem.js";
// import * as echarts from 'echarts';

//格式:当前时间: 2020年3月17- 0时54分14秒
var t = null;
t = setTimeout(time, 1000); //開始运行
function time() {
  clearTimeout(t); //清除定时器
  let dt = new Date();
  var y = dt.getFullYear();
  var mt = dt.getMonth() + 1;
  var day = dt.getDate();
  var h = dt.getHours(); //获取时
  var m = dt.getMinutes(); //获取分
  var s = dt.getSeconds(); //获取秒
  document.querySelector(".showTime").innerHTML =
    "time:" + y + "年" + mt + "月" + day + "日" + h + ":" + m + ":" + s;
  t = setTimeout(time, 1000); //设定定时器，循环运行
}

export default {
  name: "gywm",
  data() {
    return {};
  },
  computed: {
    // echarts
  },
  created() {},
  mounted() {
    this.aaa();
    this.drawLine();
    this.bbb();
    this.ccc();
  },
  methods: {
    drawLine() {
      console.log(document.getElementById("echarts1"), "555555555");
      // 基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(document.getElementById("echarts1"));
      // 绘制图表
      let option = {
        angleAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
        },
        radiusAxis: {},
        polar: {},
        series: [
          {
            type: "bar",
            data: [1, 2, 3, 4, 3, 5, 1],
            coordinateSystem: "polar",
            name: "A",
            stack: "a",
            emphasis: {
              focus: "series"
            }
          },
          {
            type: "bar",
            data: [2, 4, 6, 1, 3, 2, 1],
            coordinateSystem: "polar",
            name: "B",
            stack: "a",
            emphasis: {
              focus: "series"
            }
          },
          {
            type: "bar",
            data: [1, 2, 3, 4, 1, 2, 5],
            coordinateSystem: "polar",
            name: "C",
            stack: "a",
            emphasis: {
              focus: "series"
            }
          }
        ],
        legend: {
          show: true,
          data: ["A", "B", "C"]
        }
      };
      myChart.setOption(option);
    },
    aaa() {
      console.log(document.getElementById("echarts2"), "55555555555");

      let option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999"
            }
          }
        },
        toolbox: {
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ["line", "bar"] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        legend: {
          data: ["Evaporation", "Precipitation", "Temperature"]
        },
        xAxis: [
          {
            type: "category",
            data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
            axisPointer: {
              type: "shadow"
            }
          }
        ],
        yAxis: [
          {
            type: "value",
            name: "Precipitation",
            min: 0,
            max: 250,
            interval: 50,
            axisLabel: {
              formatter: "{value} ml"
            }
          },
          {
            type: "value",
            name: "Temperature",
            min: 0,
            max: 25,
            interval: 5,
            axisLabel: {
              formatter: "{value} °C"
            }
          }
        ],
        series: [
          {
            name: "Evaporation",
            type: "bar",
            data: [
              2.0,
              4.9,
              7.0,
              23.2,
              25.6,
              76.7,
              135.6,
              162.2,
              32.6,
              20.0,
              6.4,
              3.3
            ]
          },
          {
            name: "Precipitation",
            type: "bar",
            data: [
              2.6,
              5.9,
              9.0,
              26.4,
              28.7,
              70.7,
              175.6,
              182.2,
              48.7,
              18.8,
              6.0,
              2.3
            ]
          },
          {
            name: "Temperature",
            type: "line",
            yAxisIndex: 1,
            data: [
              2.0,
              2.2,
              3.3,
              4.5,
              6.3,
              10.2,
              20.3,
              23.4,
              23.0,
              16.5,
              12.0,
              6.2
            ]
          }
        ]
      };
      // 基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(document.getElementById("echarts2"));
      // 绘制图表
      myChart.setOption(option);
    },

    bbb() {
      console.log(document.getElementById("echarts3"), "55555555555");

      let option = {
        backgroundColor: "#2c343c",
        title: {
          text: "Customized Pie",
          left: "center",
          top: 20,
          textStyle: {
            color: "#ccc"
          }
        },
        tooltip: {
          trigger: "item"
        },
        visualMap: {
          show: false,
          min: 80,
          max: 600,
          inRange: {
            colorLightness: [0, 1]
          }
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: "55%",
            center: ["50%", "50%"],
            data: [
              { value: 335, name: "Direct" },
              { value: 310, name: "Email" },
              { value: 274, name: "Union Ads" },
              { value: 235, name: "Video Ads" },
              { value: 400, name: "Search Engine" }
            ].sort(function(a, b) {
              return a.value - b.value;
            }),
            roseType: "radius",
            label: {
              color: "rgba(255, 255, 255, 0.3)"
            },
            labelLine: {
              lineStyle: {
                color: "rgba(255, 255, 255, 0.3)"
              },
              smooth: 0.2,
              length: 10,
              length2: 20
            },
            itemStyle: {
              color: "#c23531",
              shadowBlur: 200,
              shadowColor: "rgba(0, 0, 0, 0.5)"
            },
            animationType: "scale",
            animationEasing: "elasticOut",
            animationDelay: function(idx) {
              return Math.random() * 200;
            }
          }
        ]
      };
      // 基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(document.getElementById("echarts3"));
      // 绘制图表
      myChart.setOption(option);
    },
    ccc() {
      console.log(document.getElementById("echarts4"), "55555555555");

      let option = {
        title: [
          {
            text: "Radial Polar Bar Label Position (middle)"
          }
        ],
        polar: {
          radius: [30, "80%"]
        },
        radiusAxis: {
          max: 4
        },
        angleAxis: {
          type: "category",
          data: ["a", "b", "c", "d"],
          startAngle: 75
        },
        tooltip: {},
        series: {
          type: "bar",
          data: [2, 1.2, 2.4, 3.6],
          coordinateSystem: "polar",
          label: {
            show: true,
            position: "middle",
            formatter: "{b}: {c}"
          }
        },
        backgroundColor: "#fff",
        animation: false
      };
      // 基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(document.getElementById("echarts4"));
      // 绘制图表
      myChart.setOption(option);
    }
  }
};
</script>

<style scoped>
.gywm {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.jrBanner {
  width: 24rem;
  background: #f6f6f6;
}
.title {
  height: 2rem;
  background: #aabbcc;
  text-align: center;
  line-height: 2rem;
  font-size: 1rem;
}

.two {
  max-width: 24rem;
  height: 16.5rem;
  background: cornsilk;
  display: flex;
}

.left {
  flex: 1;
  height: 16rem;
  background: #e6e6e6;
}
.panel {
  height: 4.125rem;
  border: 2px solid rgba(25, 186, 139, 0.17);
}

.pane2 {
  width: 16rem;
  height: 10rem;
}

.right {
  flex: 1;
  height: 16rem;
  background: none;
  margin-top: 130px;
}
</style>
